<!--  -->
<template>
  <div class="body">
    <div class="title">缴费管理</div>
    <!-- {{ dateValue }} -->{{ dialogVisible }}
    <Table v-bind="tableConfig" >
      <!-- 条件搜索 -->
      <template #search="{ searchSubmit, params }">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="楼栋">
            <el-cascader clearable @change="(e: any) => cascaderChange(e, params)" :props="cascaderProps"
              v-model="cascaderValue" :options="buildings" />
          </el-form-item>
          <el-form-item label="账期">
            <el-date-picker v-model="dateValue" @change="(e: any) => dateChange(e, params)" value-format="YYYY-MM-DD"
              type="daterange" range-separator="至" start-placeholder="起始日期" end-placeholder="截止日期" />
          </el-form-item>
          <el-form-item label="房号" label-width="50px">
            <el-input v-model="params.houseno" placeholder="请输入房号" clearable />
          </el-form-item>
          <el-form-item label="姓名" label-width="50px">
            <el-input v-model="params.name" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="电话" label-width="50px">
            <el-input v-model="params.mibile" placeholder="请输入电话" clearable />
          </el-form-item>
          <el-form-item label="添加人">
            <el-input v-model="params.admin" placeholder="请输入添加人" clearable />
          </el-form-item>
          <el-form-item label="流水账单">
            <el-input v-model="params.orderno" placeholder="请输入流水账单" clearable />
          </el-form-item>
          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- 操作按钮 -->
      <template #buttons="{ deleteAllHandle }">
        <el-button class="add" @click="add" type="primary">添加</el-button>
        <el-button class="del" @click="deleteAllHandle" type="danger">删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button class="update" @click="edit(scope.row)">详情</el-button>
        <el-button class="delete" @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
      <template #date="{ scope }">
        <div>
          {{ fromatDate(scope.row.date) }}
        </div>
      </template>

      <template #begindate="{ scope }">
        <div>
          {{ scope.row.begindate }}至{{ scope.row.enddate }}
        </div>
      </template>

    </Table>
    <Add @close="closeHandle" v-if="dialogVisible"></Add>
    <Details :detailsData="DetailsData"  @updateIsVisible="updateIsVisible" :isVisible="isVisible" class="Details"> </Details>
  </div>
</template>

<script lang='ts' setup>
import Table, { TableType } from '../../components/table/TableView.vue';
import { reactive, ref, onMounted } from 'vue'
import { getList, del, deleteAll } from '../../service/fee/fee'
import { getBuildingList } from '../../service/building/building';
import moment from 'moment';
import Add from '../../components/free/Add.vue'
import Details from '../../components/free/details.vue';
//详情窗口的显示
let isVisible = ref(false)
const updateIsVisible = (val: boolean) => {
  isVisible.value = val
}

//添加窗口的显示
let dialogVisible = ref(false);
const add = () => {
  dialogVisible.value = true;

}
const closeHandle = () => {
  dialogVisible.value = false;

}
const fromatDate = (val: string) => {

  return moment(val).format("YYYY年MM月DD日")
}
//楼栋

const cascaderProps = { label: 'name', value: 'id', checkStrictly: true };
const cascaderValue = ref("");
const buildings = ref([]);

const getBuildingData = async () => {
  const res: any = await getBuildingList(null);
  if (res.errCode === 10000) {
    buildings.value = res.data.list;
  }

}
const cascaderChange = (e: any, params: any) => {

  if (!e) params.buildingid = null;
  else {
    params.buildingid = e[e.length - 1];
  }


}

//日期选择器
const dateValue = ref("");
const dateChange = (e: any, params: any) => {
  if (e == null) {
    params.begindate = null;
    params.enddate = null;
  }
  else {
    params.begindate = e[0];
    params.enddate = e[1];
  }
}

import {columns} from './Fee'
const tableConfig = reactive<TableType>({
  loadData: getList,
  delete: del,
  deleteAll: deleteAll,
  dialogVisible: dialogVisible,
  columns,
})

//详情
let DetailsData = reactive({})
const edit = (val: any) => {
  
  Object.assign(DetailsData,val)
  console.log("1111",DetailsData);
  isVisible.value = true

}
onMounted(() => {
  getBuildingData();
})

</script>
<style scoped lang="less">
@import url("../../assets/styles/fee/Fee.css");
</style>